<template>
  <nav class="tabbar">
    <router-link v-for="item in items" :key="item.key" :to="item.link">
      <div class="pic">
        <i v-if="$route.name.toLowerCase() !==item.key"  class="icon" :class="`icon-${item.key}`"></i>
        <i v-else class="icon" :class="`icon-${item.key}-active`"></i>
      </div>
      <span>{{ item.text }}</span>
    </router-link>
  </nav>
</template>
<script>
export default {
  name: 'Tabbar',
  data(){
    return {
      items: [
        {
          key: 'home',
          link: '/home',
          text: '首页'
        },{
          key: 'category',
          link: '/category',
          text: '分类'
        },{
          key: 'circle',
          link: '/circle',
          text: '圈子'
        },{
          key: 'cart',
          link: '/cart',
          text: '购物车'
        },{
          key: 'user',
          link: '/user',
          text: '我'
        }
      ]
    }
  },
  created(){
    console.log(this.$route)
  }
}
</script>
